

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            p.license {
                background:grey;
            }
            body {
                font-family: sans-serif;
            }
            pre {
                background-color: #eeeeee;
                padding: 1em;
                white-space: pre-wrap;
            }

            #map-canvas {
                height: 281px;
                width: 500px;
                margin: 0px;
                padding: 0px
              }

            ol {
                counter-reset: item;
            }

            li {
                display: block;
                margin-bottom: 20px;
            }

            li:before {
                content: counters(item, ".") " ";
                counter-increment: item;
                display: block;
                position: relative;
                top: 17px;
                left: -30px;
            }

            li h2 {
                margin: 0 0 10px 0;
                padding: 0;
                line-height: 20px;
            }

        </style>
        <title>LB HTML tests</title>
<script>
function onAlertShow()
{
    alert("Hello! I am an alert box!!");
}

function onNewTab() {
    var win=window.open("http://www.google.com", '_blank');
    win.focus();
}

function onConfirmShow() {
    var r = confirm("Press a button!");
    if (r == true) {
        console.log("You pressed OK!");
    } else {
        console.log("You pressed Cancel");
    }
}

function onPromptShow() {
    var result=prompt("Please enter your name","Harry Potter");
    if (result!=null) {
        console.log("Prompt result:" + result);
    //document.getElementById("demo").innerHTML=x;
    }
}

window.addEventListener('load', function() {

  // Handle dynamic select elements.
  var selectContainer = document.getElementById('async-selects');
  var addLink = document.getElementById('add-select');
  addLink.addEventListener('click', function(e) {
    e.preventDefault();
    var newSelect = document.createElement('form');
    newSelect.innerHTML = '<select name="cars">\
        <option value="volvo">Volvo</option>\
        <option value="saab">Saab</option>\
        <option value="fiat">Fiat</option>\
        <option value="audi">Audi</option>\
      </select>\
      <br>\
      <a class="remove-select" href="#"> Remove only select</a> | <a class="remove-select-form" href="#"> Remove select wrapper</a>\
      <br><br>';
    selectContainer.appendChild(newSelect);
  });

  document.body.addEventListener('click', function(e) {
    var current = e.target;
    if (current.className == 'remove-select-form') {
      e.preventDefault();
      while( current && current.parentNode && current.nodeName.toLowerCase() !== 'form') {
        current = current.parentNode;
      }
      current.parentNode.removeChild(current);
    } else if (current.className == 'remove-select') {
      e.preventDefault();
      var parent = current.parentNode;
      parent.removeChild(parent.querySelector('select'));
    }
  });

});

</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 6
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    </head>
    
    <body>

<h1>HTML Test Cases</h1>

<ol>
    <li>
        <h2>Prompt Tests</h2>
        <ol>
            <li>
                Alert should be able to be displayed and be dismissed.<br>
                <button onclick="onAlertShow()">Show Alert</button>
            </li>
            <li>
                Confirm should be able to be displayed and be dismissed.<br>
                <button onclick="onConfirmShow()">Show Confirm</button>
            </li>
            <li>
                Prompt should be able to be displayed and be dismissed.<br>
                <button onclick="onPromptShow()">Show Prompt</button>
            </li>
        </ol>
    </li>
    <li>
        <h2>Navigation Tests</h2>
        <ol>
            <li>
                A new bubble should open up.<br>
                <button onclick="onNewTab()">Open URL in new tab</button>
            </li>
            <li>
                <a href="#" onclick="javascript:window.open('','_self').close();">Click here to close the current bubble after opening.</a>
            </li>
            <li>
                target="_blank" link. Verify that back button works in the newly opened page. It should be able to navigate back after clicking a link, and close the bubble.<br>
                <a target="_blank" rel="external" href="#">Tap to open example page in a new bubble.</a>
            </li>
            <li>
                Verify that back button works after 301 test page.<br>
                <a href="https://jigsaw.w3.org/HTTP/300/">301 redirect test page</a>
            </li>
        </ol>
    </li>
    <li>
        <h2>Form Controls</h2>
        <ol>
            <li>
                file picker: <input type="file">
            </li>
            <li>
                png file picker: <input type="file" name="pic" accept=".png">
            </li>
            <li>
                Image file picker: <input type="file" name="pic" accept="image/*">
            </li>
            <li>
                Select controls:<br>
                <form action="">
                    <select name="cars">
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="fiat">Fiat</option>
                        <option value="audi">Audi</option>
                    </select>
                    <br><br>
                </form>

                <div id="async-selects"></div>
                <a href="#" id="add-select">+ Add Async Select Control</a>
                <br><br>
            </li>
            <li>
                Checkboxes:<br>
                <form>
                    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
                    <input type="checkbox" name="vehicle" value="Car">I have a car
                </form>
            </li>
            <li>
                Text Input: <input type="text" name="user">
            </li>
            <li>
                Radio Controls:
                <form>
                    <input type="radio" name="sex" value="male">Male<br>
                    <input type="radio" name="sex" value="female">Female
                </form>
            </li>
        </ol>
    </li>
    <li>
        <h2>Context Menu</h2>
        <ol>
            <li>
                Percent encoded image, long press -> save image<br>
                <img height="100" width="100" src="">
            </li>
            <li>
                Normal image, long press -> save image<br>
                <img src="http://i.imgur.com/RhiESSg.jpg" height="300">
            </li>
            <li>
                Image wrapped with a link. You should be able to open both the image URL or the href in a new bubble.<br>
                <a href="http://brave.com"><img src="http://i.imgur.com/RhiESSg.jpg" height="300"></a>
            </li>
        </ol>
    </li>
    <li>
        <h2>Link Tests</h2>
        <ol>
            <li>
                <a href="https://play.google.com/store/apps/details?id=com.chrislacy.actionlauncher.pro&hl=en" target="_blank">Action Launcher</a> (new tab)<br>
                <a href="https://play.google.com/store/apps/details?id=com.chrislacy.actionlauncher.pro&hl=en">Action Launcher</a><br>
                <a href="https://play.google.com/store/devices/details/Nexus_10_16GB?id=nexus_10_16gb&hl=en">Nexus 10</a><br><br><br>

                <a href="mailto:webmaster@example.com">Email test</a><br>
                <a href="tel:5551234567">Call (555)123-4567</a><br>
                <a href="callto:5551234567">Call (555)123-4567 [SKYPE]</a><br>
                <a href="im:username@gtalk.com">IM</a> (unsupported)<br>
                <a href="javascript:window.open('http://www.linkbubble.com');">JavaScript URL</a><br>
            </li>
        </ol>
    </li>
    <li>
        <h2>Map Test</h2>
        <ol>
            <li>
                Should Render:
                <div id="map-canvas" width="500" height="281"></div>
            </li>
        </ol>
    </li>
</ol>

<!--
<iframe src="https://player.vimeo.com/video/91688685" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/91688685">Fireside Chat: Android Design</a> from <a href="https://vimeo.com/accel">Accel Partners</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
-->
  </body>
</html>